<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
    <title>首页</title>
    <link th:href="@{/css/mobile.css}" rel="stylesheet">
    <script type="text/javascript" th:src="@{/script/jquery-1.7.2.js}"></script>
</head>
<body>
<header class="nav-top">
    <div class="left-text">智慧食堂</div>
    <div id="page-name" style="position: fixed;z-index: 100;top: 4vh" class="center-text">首页</div>
</header>
<div style="position: absolute; top: 0vh; left: 0; width: 100%; height: 92vh;">
    <iframe id="iframe" name="iframe" frameborder=0 width="100%" height="100%" th:src="@{/mobile/index}"></iframe>
</div>

<footer>
    <div class="nav-bottom">
        <div class="nav-ui"><img class="ui-inner" th:src="@{/icon/mobile/menu.png}" alt="菜单"><a
                onclick="setText('菜单')" target="iframe"
                href="/mobile/toMenu"
                class="ui-inner"></a>
            <p>菜单</p></div>
        <div class="nav-ui"><img class="ui-inner" th:src="@{/icon/mobile/token.png}" alt="令牌"><a
                onclick="setText('令牌')" target="iframe"
                href="/mobile/toToken"
                class="ui-inner"></a>
            <p>令牌</p></div>
        <div class="nav-ui"><img class="ui-inner" th:src="@{/icon/mobile/index.png}" alt="首页"><a
                onclick="setText('首页')" target="iframe"
                href="/mobile/toIndex"
                class="ui-inner"></a>
            <p>首页</p></div>
        <div class="nav-ui"><img class="ui-inner" th:src="@{/icon/mobile/cart.png}" alt="购物车"><a
                onclick="setText('购物车')" target="iframe"
                href="/mobile/toCart"
                class="ui-inner"></a>
            <p>购物车</p></div>
        <div class="nav-ui"><img class="ui-inner" th:src="@{/icon/mobile/user.png}" alt="我的"><a
                onclick="setText('我的')" target="iframe"
                href="/mobile/toUser"
                class="ui-inner"></a>
            <p>我的</p></div>
    </div>
</footer>
</body>
<script>
    function setText(text) {
        document.getElementById("page-name").innerText = text;
    }
</script>
</html>